<template>
  <t-space break-line>
    <t-image
      v-for="(_, index) in cleanedImages"
      :key="index"
      :src="_"
      fit="cover"
      overlay-trigger="hover"
      :style="{ width: props.width, height: props.height }"
    >
      <template #overlayContent>
        <div
          :style="{
            background: 'rgba(0,0,0,.4)',
            color: '#fff',
            height: '100%',
            display: 'flex',
            alignItems: 'center',
            justifyContent: 'center',
          }"
          @click="handleView(index)"
        >
          <browse-icon size="1.4em" style="margin-right: 2px" />
          预览
        </div>
      </template>
    </t-image>
  </t-space>
  <t-image-viewer
    v-model:visible="imageViewerConfig.visible"
    v-model:index="imageViewerConfig.index"
    :images="cleanedImages"
  />
</template>

<script setup lang="ts">
import { BrowseIcon } from 'tdesign-icons-vue-next';
import { computed, PropType, reactive } from 'vue';

// props
const props = defineProps({
  images: {
    type: Array as PropType<string[]>,
    default: () => [],
  },
  width: {
    type: String,
    default: '120px',
  },
  height: {
    type: String,
    default: '120px',
  },
});
const cleanedImages = computed(() => {
  return props.images.map(url => {
    // Split at comma and take the first part
    if (url.endsWith('}')) {
      const cleanUrl = url.split(',')[0];
      // Also remove any trailing whitespace just in case
      return cleanUrl.trim();
    } else {
      return url
    }
  });
});

// 图片预览配置
const imageViewerConfig = reactive({
  visible: false,
  index: 0,
});
// 处理查看
const handleView = (index: number) => {
  imageViewerConfig.index = index;
  imageViewerConfig.visible = true;
};
</script>

<style lang="less" scoped></style>
